<template>
  <div class="profile-page">
    <a-page-header
      title="账户信息"
      :ghost="false"
      @back="() => router.back()"
    >
      <template #extra>
        <a-button type="primary" @click="handleEditPassword">
          修改密码
        </a-button>
      </template>
    </a-page-header>

    <div class="profile-content">
      <a-card title="基本信息" :bordered="false" class="info-card">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="用户名">
            {{ userStore.userInfo?.username }}
          </a-descriptions-item>
          <a-descriptions-item label="真实姓名">
            {{ userStore.userInfo?.realName }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号">
            {{ userStore.userInfo?.phone || '未设置' }}
          </a-descriptions-item>
          <a-descriptions-item label="角色">
            <a-tag color="purple">
              {{ getRoleDisplayName(userStore.userInfo?.role) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item v-if="!userStore.isPlatformAdmin" label="租户ID">
            {{ getTenantIdDisplay() }}
          </a-descriptions-item>
          <a-descriptions-item v-else label="权限范围">
            管理所有租户
          </a-descriptions-item>
          <a-descriptions-item label="账户状态">
            <a-tag :color="userStore.userInfo?.status === 1 ? 'success' : 'error'">
              {{ userStore.userInfo?.status === 1 ? '正常' : '已禁用' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>

    <!-- 修改密码弹窗 -->
    <a-modal
      v-model:open="passwordModalVisible"
      title="修改密码"
      @ok="handlePasswordSubmit"
      @cancel="passwordModalVisible = false"
    >
      <a-form :label-col="{ span: 6 }">
        <a-form-item label="新密码" required>
          <a-input-password v-model:value="newPassword" placeholder="请输入新密码（至少6位）" />
        </a-form-item>
        <a-form-item label="确认密码" required>
          <a-input-password v-model:value="confirmPassword" placeholder="请再次输入新密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { LockOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'
const router = useRouter()
const userStore = useUserStore()

const passwordModalVisible = ref(false)
const newPassword = ref('')
const confirmPassword = ref('')

// 获取角色显示名称
const getRoleDisplayName = (role: string | undefined): string => {
  if (!role) return ''
  const roleMap: Record<string, string> = {
    'PLATFORM_ADMIN': '平台超级管理员',
    'SUPER_ADMIN': '超级管理员',
    'SITE_ADMIN': '站点管理员',
  }
  return roleMap[role] || role
}

// 获取租户ID显示
const getTenantIdDisplay = (): string => {
  const tenantId = userStore.userInfo?.tenantId
  if (tenantId === 0) return '平台'
  return `T${String(tenantId).padStart(6, '0')}`
}

// 修改密码
const handleEditPassword = () => {
  passwordModalVisible.value = true
  newPassword.value = ''
  confirmPassword.value = ''
}

// 提交密码修改
const handlePasswordSubmit = () => {
  if (!newPassword.value || newPassword.value.length < 6) {
    message.error('密码至少6位')
    return
  }
  
  if (newPassword.value !== confirmPassword.value) {
    message.error('两次密码输入不一致')
    return
  }
  
  // TODO: 调用修改密码API
  message.success('密码修改成功，请重新登录')
  passwordModalVisible.value = false
  
  // 3秒后退出登录
  setTimeout(() => {
    handleLogout()
  }, 2000)
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  message.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.profile-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.ant-page-header) {
  background: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

.profile-content {
  flex: 1;
  overflow: auto;
}

.info-card {
  box-shadow: var(--shadow-sm);
  max-width: 1200px;
  margin: 0 auto;
}

:deep(.ant-descriptions-bordered .ant-descriptions-item-label) {
  background: #fafafa;
  font-weight: 500;
  width: 140px;
}
:deep(.ant-page-header){
  padding: 0!important;
}
</style>

